import { Avatar, Button, Divider, MenuProps } from 'antd';
import Dropdown, { DropdownProps } from 'antd/es/dropdown/dropdown';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';

import { IconButton, SvgIcon } from '@/components/icon';
import { useLoginStateContext } from '@/pages/sys/login/providers/LoginStateProvider';
import { useRouter } from '@/router/hooks';
import { useUserInfo, useUserActions } from '@/store/userStore';
import { useThemeToken } from '@/theme/hooks';
import { RightOutlined } from '@ant-design/icons';
import { useSettings } from '@/store/settingStore';
import { ThemeLayout } from '@/types/enum';
import { logout } from '@/pages/auth/authUtils';
import DeleteConfirmModal from '@/pages/datasets/components/DeleteConfirmModal';

/**
 * Account Dropdown
 */
export default function Account() {
  const { replace } = useRouter();
  const { username, email, avatar, role } = useUserInfo();
  const { clearUserInfoAndToken } = useUserActions();
  const { backToLogin } = useLoginStateContext();
  const { themeLayout } = useSettings();
  const { t } = useTranslation();
  const [logoutVisible, setLogoutVisible] = useState(false);
  const { colorBgElevated, borderRadius, borderRadiusLG, boxShadowSecondary, colorPrimary } =
    useThemeToken();

  const contentStyle: React.CSSProperties = {
    backgroundColor: colorBgElevated,
    borderRadius: '10px',
    boxShadow: boxShadowSecondary,
    width: '120px',
  };

  const menuStyle: React.CSSProperties = {
    boxShadow: 'none',
  };

  const dropdownRender: DropdownProps['dropdownRender'] = (menu) => (
    <div style={contentStyle}>
      <div className="flex flex-col items-center p-4">
        <div>{username}</div>
        {/* <div className="text-gray">{email}</div> */}
      </div>
      <Divider style={{ margin: 0 }} />
      {React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
    </div>
  );

  const handleLogoutConfirm = () => {
    setLogoutVisible(false);
    logout();
  };

  const items: MenuProps['items'] = [
    {
      key: '2',
      label: <button className="text-center font-bold">退出登录</button>,
      icon: (
        <SvgIcon
          icon="bxs--door-open"
          size={30}
          style={{
            padding: '3px',
            color: '#434a5f',
          }}
        />
      ),
      onClick: () => {
        setLogoutVisible(true);
      },
    },
  ];

  return (
    <div className="ml-4 flex items-center p-2">
      <Avatar
        className="h-10 w-10 transform-none cursor-pointer px-0 hover:scale-105"
        style={{ backgroundColor: colorPrimary }}
      >
        {username && username[0]}
      </Avatar>

      <div className="ml-2">
        <div style={{ fontSize: '14px' }}>{username}</div>
        <div className="text-[#AAAFC2]" style={{
          fontSize: '11px',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          width: '150px'
        }}>
          {role?.name}
        </div>
      </div>

      <Dropdown menu={{ items }}>
        <div className="ml-auto">
          <Button type="text" icon={<RightOutlined size={10} />}></Button>
        </div>
      </Dropdown>

      <DeleteConfirmModal
        visible={logoutVisible}
        text="确定要退出登录吗?"
        onCancel={() => {
          setLogoutVisible(false);
        }}
        onConfirm={handleLogoutConfirm}
        onConfirmText="退出登录"
      />
    </div>
  );
}
